<template>
    <div>
      <div class="title">
        <text class="title-text large-size">{{detailData.companyName}} <text class="title-text2">{{detailData.certification}}</text></text>
      </div>
      <div class="panel">
        <text class="text1"><text class="text2 small-size">联系人：</text><text class="text3 small-size">{{detailData.legalName}}</text></text>
        <text class="text1"><text class="text2 small-size">联系电话：</text><a :href="detailData.legalMobile1" class="text3 small-size"><text class="text3 phonenum">{{detailData.legalMobile}}<image class="phone-image" v-bind:src="phoneImg"></image></text></a></text>
        <text class="text1"><text class="text2 small-size">提交时间：</text><text class="text3 small-size">{{detailData.gmtCreatedStr}}</text></text>
        <text class="text1"><text class="gotocommunity small-size" @click="gotoCommunity">查看小区信息</text><text class="gotouserquery small-size" @click="gotoUserquery">查看用户信息</text></text>
      </div>
      <div class="images">
        <div class="cell images-cell" v-for="(item, i) in detailData.imgUrlList">
          <div class="images-item-wrap">
            <image class="images-item" @click="clickImg(i)" v-bind:src="item.attchUrlSmall"></image>
          </div>
        </div>
      </div>
      <div class="process">
        <div class="cell" v-for="item in memoList">
          <div class="panel process-panel">
            <div v-if="item.headImage.length > 0" class="image-wrap">
              <image class="detail-image" v-bind:src="item.headImage[0].attchUrlSmall"></image>
            </div>
            <div v-else class="image-wrap">
              <image class="detail-image" v-bind:src="headPic"></image>
            </div>
            <div class="detail-info">
              <text class="detail-name small-size" >{{item.operatorName}}</text>
              <text v-if="item.statusName=='通过'" class="detail-result pass small-size">{{item.statusName}}</text>
              <text v-else class="detail-result nopass small-size">{{item.statusName}}</text>
              <text class="detail-time small-size">{{item.apprTimeStr}}</text>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
  var dingtalk = require('weex-dingtalk');
  const dd = dingtalk.apis;
  const modal = weex.requireModule('modal');

  const getData = _webpath + '/tenantmanager/ajax/tentantdetail';
  const turnPgae =  _webpath + '/tenantmanager/tocommunity';
  const turnPgae1 =  _webpath + '/tenantmanager/toregister';
  export default {
    data () {
      return {
        showLoading: 'hide',
        detailData: {},
        memoList: [],
        phoneImg: '',
        headPic: _staticresources + '/images/head.png'
      }
    },
    mounted: function(){
      dingtalk.config({
        agentId : _agentid,
        corpId : _corpid,
        timeStamp : _timeStamp,
        nonceStr : _nonceStr,
        signature : _signature,
        jsApiList : ['biz.telephone.showCallMenu']
      });
      dingtalk.ready(function(){
        // 设置导航
        const dd = dingtalk.apis;
        dd.biz.navigation.setTitle({
          title: '租户查询'
        });
      });
      this.phoneImg = _staticresources + '/images/dial-image.png';
      this.getDetailList();
    },
    methods: {
      clickImg(index) {
        // 设置图片预览
        const dd = dingtalk.apis;
        dd.biz.util.previewImage({
          urls: [this.detailData.imgUrlList[index].attchUrlSmall],//图片地址列表
          current: this.detailData.imgUrlList[index].attchUrl,//当前显示的图片链接
          onSuccess : function(result) {
            /**/
          },
          onFail : function(err) {
          }
        })
        //this.showImg = true;
         // 获取当前图片地址
         //this.imgSrc = e.currentTarget.attrs.src;
      },
      getDetailList: function(){
        var self = this;
        $.ajax({
          type: 'GET',
          url: getData,
          data:  {
            tenantId: _tenantId,
          },
          success : function(data) {
            if(data.messageType == 'FAIL') {
              modal.alert({
                message: data.messageContent,
                okTitle: '确定',
              }, function () {
                if(data.redirectUrl != '') {
                  location.href = _webpath + data.redirectUrl;
                }
              });
            }
            else if(data.messageType == 'WARN') {
              modal.alert({
                message: data.messageContent,
                okTitle: '确定',
              }, function () {
                if(data.redirectUrl != '') {
                  location.href = _webpath + data.redirectUrl;
                }
              });
            }
            else if(data.messageType == 'SUCCESS') {
              /*dd.device.notification.hidePreloader({
               onSuccess : function(result) {},
               onFail : function(err) {}
               });*/
              self.detailData = data.valueObj.tenantInfo;
              self.detailData.legalMobile1 = 'tel:' + self.detailData.legalMobile;
              self.detailData.certification = '(' + self.detailData.certification + ')';
              self.memoList = data.valueObj.memoList;
            }
          },
          error : function(xhr, errorType, error) {

          }
        });

      },
      callPhone (number) {
        alert(number)
        biz.telephone.showCallMenu({
          phoneNumber: number, // 期望拨打的电话号码
          code: '+86', // 国家代号，中国是+86
          showDingCall: true, // 是否显示钉钉电话
          onSuccess : function() {},
          onFail : function() {}
        })
      },
      gotoCommunity () {
        location.href = turnPgae + '?tenantId=' + _tenantId;
      },
      gotoUserquery () {
        location.href = turnPgae1 + '?tenantId=' + _tenantId;
      },
    }
  }
</script>
<style scoped>
  .panel {
    width: 100%;
    //padding: 0.25rem 0;
    flex-direction: column;
  }
  .title {
    width: 100%;
    padding: 20px 30px 10px;
    flex-direction: column;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #f4f4f4;
  }
  .title-text {
    display: inline-block;
  }
  .title-text2 {
    display: inline-block;
    position: absolute;
    bottom: 4px;
    padding-left: 5px;
    font-size: 24px;
  }
  .gotocommunity {
    display: inline-block;
    //padding-top: 15px;
    //padding-left: 30px;
    color: rgb(16, 142, 233);
  }
  .gotouserquery {
    display: inline-block;
    float: right;
  //padding-top: 15px;
  //padding-left: 30px;
    color: rgb(16, 142, 233);
  }
  .text1 {
    width: 100%;
    display: inline-block;
    padding: 15px 30px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #f4f4f4;
  }
  .text2 {
    display: inline-block;
  }
  .text3 {
    display: inline-block;
    float: right;
  }
  .phonenum {
    color: #38adff;
    padding-right: 40px;
  }
  .phone-image {
    display: inline-block;
    position: absolute;
    top: 5px;
    right: 0;
    width: 30px;
    height: 30px;
  }
  .process-panel {
    padding: 10px 30px 15px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #f4f4f4;
  }
  .image-wrap {
    display: inline-block;
    position: absolute;
    top: 19px;
  }
  .detail-image {
    border-radius: 30px;
    width: 60px;
    height: 60px;
  }
  .detail-info {
    position: relative;
    top: 0;
    padding-left: 85px;
  }
  .detail-name {
    padding-bottom: 5px;
  }
  .detail-result {
    //font-size: 0.5rem;
  }
  .detail-time {
    position: absolute;
    top: 0;
    right: 15px;
    color: #999;
  }
  .images {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 15px 30px;
  }
  .images-cell {
    padding: 20px;
  }
  .images-item {
    width: 160px;
    height: 160px;
    cursor: none !important;
  }
  .pass {
    color: #108EE9;
  }
  .nopass {
    color: #F04134;
  }
</style>